<template>
    <div>
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <el-radio-button label="top">top</el-radio-button>
            <el-radio-button label="right">right</el-radio-button>
            <el-radio-button label="bottom">bottom</el-radio-button>
            <el-radio-button label="left">left</el-radio-button>
        </el-radio-group>
        <el-tabs :tab-position="tabPosition">
            <el-tab-pane v-for="item in tabPaneData" :label="item.tableComment" :key="item.tableName">
                <DemoTable :tableName="item.tableName" :tableComment="item.tableComment"/>
            </el-tab-pane>
<!--            <el-tab-pane label="用户管理">-->
<!--                <DemoTable tableName="用户管理"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="配置管理">-->
<!--                <DemoTable tableName="配置管理"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="角色管理">-->
<!--                <DemoTable tableName="角色管理"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="员工">-->
<!--                <DemoTable tableName="员工"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="学生">-->
<!--                <DemoTable tableName="student"/>-->
<!--            </el-tab-pane>-->
        </el-tabs>
    </div>
</template>
<script>
    import DemoTable from '@/components/DemoTable/DemoTable.vue'
    export default {
        components: {
            DemoTable
        },
        data() {
            return {
                tabPosition: 'left',
                tabPaneData: [
                    // {
                    //     tableComment: '用户管理',
                    //     tableName: 'user'
                    // },
                    // {
                    //     tableComment: '配置管理',
                    //     tableName: 'config'
                    // },
                    // {
                    //     tableComment: '角色管理',
                    //     tableName: 'role'
                    // },
                    // {
                    //     tableComment: '员工',
                    //     tableName: 'employee'
                    // },
                    // {
                    //     tableComment: '学生',
                    //     tableName: 'student'
                    // }
                ]
            };
        },
        created() {
            this.initTableData()
        },
        methods: {
            initTableData(){
                console.log(`刷新数据`);
                this.$api.commonData.dataList('commonTable').then(res => {
                    this.tabPaneData = res.data.data
                    console.log(`接收tab数据 >>>`,res)
                })
            }
        }
    };
</script>